<template>
    <div class="contentMain">
      <div class="titleContent">
        <div class="topBackgroundImg">
          <img class="leftImg" src="https://gve.oss-cn-beijing.aliyuncs.com/2020/04/30/1588256519130.png" alt="">
          <p>云南名族之声歌手大赛</p>
          <img class="rightImg" src="https://gve.oss-cn-beijing.aliyuncs.com/2020/04/30/1588256518966.png" alt="">
        </div>
      </div>
    </div>
</template>
<script>
export default {
  data:()=>({

  })
}
</script>
<style lang="scss" scoped>
  .contentMain {
    .titleContent {
      width: 100%;
      .topBackgroundImg {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80%;
        height: 180px;
        margin: 0 auto;
        background-image: url("https://gve.oss-cn-beijing.aliyuncs.com/2020/04/30/1588256518471.png");
        background-size: 100%;
        p {
          text-align: center;
          width: 50%;
          color: #9d4b3c;
          font-size: 24px;
          margin-top: 40px;
        }
        img{
          width:80px;
        }
        .leftImg{
          position: absolute;
          left:-10px;
          bottom:0;
        }
        .rightImg{
          position: absolute;
          right:-10px;
          bottom:0;
        }
      }
    }
  }
</style>